<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="css/base.css">
</head>

<body>
    <div id="v-app">
        <templata v-if="code1===1">
            <em>JavaScript</em>
            <em>Vs code</em>
            <em>Css</em>
        </templata>

        <templata v-else>
             <h1>
                <em>Java</em>
                <br>
                <em>Html</em>
                <br>
                <em>C#</em>
             </h1>
        </templata>
    </div>
<!-- +++++++++++++++++++++++++++++++++++++ -->
    <div id="app1">
        <div :class="[{'active':isActive},errorCls]">
            <font class="color">你辣么好还来踢我，非常感谢</font>
            <h1>不中，那就勿扰</h1>
        </div>
    </div>
<!-- +++++++++++++++++++++++++++++++++++++ -->
    <div id="app3">
        <p v-for="(value,key,index) in user">
            <em>{{index}}-{{key}}:{{value}}</em>
        </p>
        <em style="color: aqua;">时间于：{{time}}</em>
    </div>

    <script>
        var app1=new Vue({
            el:"#v-app",
            data:{
                code1:''
            }
        })


        var app2 = new Vue({
            el: '#app1',
            data: {
                //activeCls:'active',
                errorCls: 'error',
                isActive: true
            }
        })

        var app3=new Vue({
            el:'#app3',
            data:{
                user:{
                    名字: 'dras',
                    性别: '男',
                    年龄: '20',
                },
                time:new Date()
            }
        })
    </script>
</body>

</html>